<template>
  <div class="container">
    <div class="row-center" style="padding: 20px;">
      <div class="col" style="width: 100%">
        <Input v-model="input" placeholder="题材搜索" icon="ios-search" @on-click="doSearch" size="large"
               @on-keyup="doSearch"/>
        <Button type="ghost" style="margin-top: 20px;width: 100px" @click="modalAddSubject= true">增加题材</Button>
        <Table height="700" width="" :columns="tableHeader" :data="subjectData" border highlight-row
               @on-current-change="onSelected" style="margin-top: 20px;"></Table>
      </div>
      <div class="col" style="width: 100%;margin-left: 50px">
        <span style="height: 35px;font-size: 25px"> {{currentSubject.topicName}}</span>
        <Button type="ghost" style="margin-top: 20px;width: 100px" @click="modalAddStock = true">增加股票</Button>
        <Table height="700" width="" :columns="stockTableHeader" :data="stockData" border
               style="margin-top: 20px;"></Table>
      </div>
    </div>
    <Modal
      width="400"
      title="修改题材"
      @on-ok="commitSubjectChange"
      v-model="modalSubject">
      <div class="col">
        <span style="margin-bottom: 10px">题材：</span>
        <Input v-model="currentSubject.topicName"/>
        <span style="margin-top: 20px;margin-bottom: 10px">来源：</span>
        <Input v-model="currentSubject.from"/>

      </div>
    </Modal>

    <Modal
      width="400"
      title="添加题材"
      @on-ok="commitAddSubject()"
      v-model="modalAddSubject">
      <div class="col">
        <span style="margin-bottom: 10px">题材：</span>
        <Input v-model="addSubjectName"/>
        <span style="margin-top: 20px;margin-bottom: 10px">来源：</span>
        <Input v-model="addSubjectFrom"/>

      </div>
    </Modal>


    <Modal
      width="400"
      title="添加股票"
      @on-ok="commitAddStock"
      v-model="modalAddStock">
      <div class="col">
        <span style="margin-bottom: 10px">股票代码：</span>
        <Input v-model="addStockCode"/>
      </div>
    </Modal>
  </div>
</template>

<script>

  import axios from "../assets/http/http";

  export default {
    name: 'SubjectCollect',
    data() {
      return {
        input: '',
        tableHeader: [
          {
            title: '题材',
            key: 'topicName',
            minWidth: 125,
            align: 'center',

          }, {
            title: '来源',
            key: 'from',
            minWidth: 125,
            align: 'center',

          },
          {
            title: '操作',
            key: 'action',
            minWidth: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '20px'
                  },
                  on: {
                    click: () => {
                      this.saveSubject(params.row)
                    }
                  }
                }, '修改'),

                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },

                  on: {
                    click: () => {
                      this.removeSubject(params)
                    }
                  }
                }, '删除'),
              ]);
            }
          }],
        stockTableHeader: [
          {
            title: '股票名称',
            key: 'stockName',
            minWidth: 110,

          }, {
            title: '股票代码',
            key: 'stockCode',
            minWidth: 110,

          },
          {
            title: '来源',
            key: 'from',
            align: 'center',
            minWidth: 110,


          },
          {
            title: '操作',
            key: 'action',
            minWidth: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [


                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },

                  on: {
                    click: () => {
                      this.removeStock(params)
                    }
                  }
                }, '删除'),
              ]);
            }
          }

        ],
        subjectData: [],
        localData: [],
        stockData: [],
        currentSubject: '',
        currentStock: '',
        addSubjectName: '',
        addSubjectFrom: '',
        addStockCode: '',
        modalSubject: false,
        modalAddSubject: false,
        modalAddStock: false,

      }
    },

    methods: {
      removeStock(info) {
        axios.post('man/subject/delStock  ', {
          "stockId": info.row.stockId,
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("删除成功");
            this.stockData.splice(info.index, 1)
          }
        }).catch(error => {
          console.log(error);
        })
      },
      removeSubject(info) {
        axios.post('man/subject/delSubject ', {
          "subjectId": info.row.subjectId,
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("删除成功");
            this.subjectData.splice(info.index, 1);
          }
        }).catch(error => {
          console.log(error);
        })
      },
      saveSubject(params) {
        this.modalSubject = true;
        this.currentSubject = params;
      },
      commitAddSubject() {
        axios.post('man/subject/setSubject', {
          "topicName": this.addSubjectName,
          "from": this.addSubjectFrom
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("添加成功");
            this.modalAddSubject = false;
            this.initSubjectTable();
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },
      commitAddStock() {
        axios.post('man/subject/setStock ', {
          "stockCode": this.addStockCode,
          "stockTopicName": this.currentSubject.topicName,
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("添加成功");
            this.modalAddStock = false;
            this.getStockList(this.currentSubject.topicName);
          } else {
            this.$Message.error(rsp.data.msg);
          }
        }).catch(error => {
          console.log(error);
        })
      },

      commitSubjectChange() {
        axios.post('man/subject/setSubject', {
          "subjectId": this.currentSubject.subjectId,
          "topicName": this.currentSubject.topicName,
          "from": this.currentSubject.from
        }).then(rsp => {
          if (rsp.data.retCode === 1) {
            this.$Message.success("保存成功");
            this.modalSubject = false;
            this.initSubjectTable();
          }
        }).catch(error => {
          console.log(error);
        })
      },
      getStockList(subject) {
        axios.get('subject/listStocksBySubject?pageSize=10000&stockTopicName=' + subject).then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.stockData = rsp.data.retData;
              let stocks = '';
              for (var i = 0; i < this.stockData.length; i++) {
                stocks += this.stockData[i].stockCode.substring(0, 6) + ',';
              }
              this.getStockMap(stocks);
            } else {
              this.stockData = [];
            }

          }
        }).catch(error => {
          console.log(error);
        })
      },
      getStockMap(stocks) {
        axios.get('stock/getStockName?stockCode=' + stocks).then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              var map = rsp.data.retData;
              var list = this.stockData;
              for (var i = 0; i < list.length; i++) {
                list[i].stockName = map[list[i].stockCode.substring(0, 6)];
              }
            }
          }
        }).catch(error => {
          console.log(error);
        })
      },
      onSelected(currentRow, oldCurrentRow) {
        this.currentSubject = currentRow;
        this.getStockList(currentRow.topicName);
      },
      doSearch() {
//        if(event.keyCode===13){
        if (this.input === null || this.input.trim() === "") {
          this.subjectData = this.localData;
        } else {
          this.subjectData = [];
          var result = this.input.trim().toLocaleLowerCase();
          for (var i = 0; i < this.localData.length; i++) {
            if (this.localData[i].topicName.indexOf(result) >= 0) {
              this.subjectData.push(this.localData[i]);
              this.onSelected(this.localData[i], null);
            }
          }
        }
//        }

      },

      initSubjectTable() {
        axios.get('subject/listAllSubjects?pageSize=10000').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.localData = this.subjectData = [];
              this.localData = this.subjectData = rsp.data.retData;

            }

          }
        }).catch(error => {
          console.log(error);
        })
      },
      doSearchFromMain() {
        axios.get('subject/listAllSubjects?pageSize=10000').then(rsp => {
          if (rsp.data.retCode === 1) {
            if (rsp.data.retData) {
              this.localData = this.subjectData = [];
              this.localData = this.subjectData = rsp.data.retData;
              this.doSearch();
            }

          }
        }).catch(error => {
          console.log(error);
        })
      }
    },
    created() {
      this.initSubjectTable();
    }
  }
</script>

<style scoped>


  .container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    box-sizing: border-box;
  }

  @media screen and (min-width: 1281px) and (max-width: 2000px) {

  }


</style>
